<template>
    <el-autocomplete v-model="model" :fetch-suggestions="remoteMethod" placeholder="请输入关键词" :popper-class="textAlign"
    @select="handleSelect" style="width:100%"></el-autocomplete>
</template>

<script>
import { findCreater} from 'api/common';
export default {
    props: {
        value: {
            type: [String, Number],
            required: true
        }
    },
    computed: {
        model: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val);
            }
        }
    },
    data() {
        return {
            list: null,
            textAlign:'',
            createrName:'' // 缓存创建人名字
        }
    },
    methods: {
        remoteMethod(query, cb) {
            query = query.trim();
            if(query==''){
                cb([{value:'无数据'}]);
                this.textAlign = 'remote-center';
            }
            if(this.createrName!=query && this.createrName!=''){
                this.$emit('change','');
            }
            if (query) {
                // querySchoolByName(query).then(response => {
                //    this.list = response.data.content;
                //    if(this.list==''){
                //        return;
                //    }
                // }).then(() => {
                //     let results = this.list.filter(this.createStateFilter(query));
                //     clearTimeout(this.timeout);
                //     this.timeout = setTimeout(() => {
                //         cb(results);
                //     }, 200 * Math.random());
                // });
                findCreater(query).then(response => {
                   this.list = response.data.content;
                   if(this.list==''){
                       return;
                   }
                }).then(() => {
                    let results = this.list.filter(this.createStateFilter(query));
                    if(results.length){
                        this.textAlign = '';
                        cb(results)
                    }else{
                        this.textAlign = 'remote-center';
                        cb([{value:'无数据'}]);
                    }
                });
            } 
        },
        // 过滤
        createStateFilter(query) {
            return (state) => {
                state.value = state.sUserName; 
                return (state.value.toLowerCase().includes(query.toLowerCase()));
            };
        },
        // 获取id
        handleSelect(val) {
            if(val.pId){
                this.createrName = val.sUserName; // 获取缓存创建人名字
                this.$emit('change', val.pId);
            }else{
                this.$emit('input', '');
            }
        },
    }
}
</script>

<style>

</style>
